昨天介紹了 next/image 為何出現了以及它幫我們解決了什麼問題今天我們就來看看，這個 Image Component 可以接受甚麼 props 吧，你可以想成這個圖片的屬性可以怎麼調整

Required Props

src

首先是 src 也就是圖片的來源，你可以放在專案中的資料夾，
也可以從接受外部的網址去要圖片，並在 next.config.js 中設定

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
}

height、width

昨天有稍微提到這兩個 property，它們會依照 layout 的不同而有不同的效果

• 當 layout="intrinsic" or layout="fixed
  height、width 以像素為單位去渲染，因此它將影響圖片的顯示大小。
• 當layout="responsive", layout="fill
  height、width 以像素為單位，只會影響圖片的比例

Optional Props

layout

再來就是蠻常用到的 layout，它分成四種類型

1. intrinsic
2. fixed
3. responsive
4. fill

intrinsic (default)

這是 layout 的默認模式
他會縮小以適應容器的寬度，最大時為圖片本身原始的大小

fixed

設定寬高之後，圖片尺寸不會隨著視窗的變化，有點類似於原生 img 標籤

responsive

縮放大小比例以符合容器的寬度
注意，使用 responsive 時，父層元素，也就是你的容器要使用 display: block

fill

在 X 和 Y 軸上增長以填滿容器，有點類似 objectFit

注意，使用 fill 時，父層元素，也就是你的容器要使用 display: relative

priority

因為 next/Image 延遲載入圖片的，所以 priority 屬性，讓 Next.js 幫我們自動生成 preload 的 <link>

quality

可以優化圖片的畫質，1 到 100 之間的整數，其中 100 是最佳畫質。默認為 75。

更多介紹：https://nextjs.org/docs/api-reference/next/image#src

小結

今天是鐵人賽的最後一天，雖然標題是打說與 react 的 30天，但是後面卻是在介紹 next.js，中途也有不知道寫什麼的時候，但是這 30 天還是撐過了，得到了很多，希望文章可以幫助到對 react 知識有興趣的人，

感謝大家